<template>
  <div class="search-container">
    <van-search
      :placeholder="hotWord"
      v-model="value"
      show-action
      @search="onSearch"
      @cancel="$router.back()"
      @input="onInput"
    />
    <div v-show="searchList.length" class="searchList">
      <van-cell
        :title="item.title"
        @click="searchListTap(item.title)"
        v-for="(item, index) in searchList"
        :key="index"
      >
      </van-cell>
    </div>

    <!-- 历史记录 -->
    <div class="search-history">
      <van-cell title="搜索历史">
        <div>
          <span @click="clear">全部删除</span>
        </div>
      </van-cell>
      <van-cell
        :title="item"
        v-for="(item, index) in history"
        :key="item"
        :to="{ path: '/searchList', query: { key_word: item } }"
      >
        <van-icon name="close" @click="delele(index)" />
      </van-cell>
    </div>
    <!-- /历史记录 -->
  </div>
</template>
<script>
import { Search } from "vant";
import { Toast } from "vant";

function debounce(fn, t = 500) {
  let timer = null;
  return function (...arg) {
    clearTimeout(timer);
    timer = setTimeout((v) => {
      fn.apply(this, arg);
    }, t);
  };
}

import { search as searchApi } from "@/api/api";
export default {
  name: "search",
  data() {
    return {
      value: "",
      hotWord: "二舅",
      searchList: [],
      history: [], //历史记录
    };
  },
  created() {
    //一进来就得判断 历史记录

    let history = localStorage.getItem("history");

    //1.第一次来 没搜索过 undefined
    // 2.有记录

    if (history) {
      this.history = JSON.parse(history);
    }
  },
  watch: {
    value(n) {
      if (n.trim.length === 0) {
        this.searchList = [];
      }
    },
  },
  components: {
    [Search.name]: Search,
    [Toast.name]: Toast,
  },
  mounted() {},
  methods: {
    //输入框内容变化触发
    onInput: debounce(function (e) {
      e = e.trim(); //去掉前后空格
      if (e.length === 0) return;
      searchApi({
        key_word: e,
      }).then((res) => {
        console.log(res);
        if (res.code == 0) {
          this.searchList = res.data;
        }
      });
    }),
    // Enter建触发
    onSearch(e) {
      e = e.trim(); //去掉前后空格
      e = e || this.hotWord;
      console.log(e);
      this.searchListTap(e);
    },
    searchListTap(title) {
      let index = this.history.findIndex((v) => v === title); //用title 和数组每一项进行比较 有一样的 返回索引  没找到返回-1
      if (index >= 0) {
        this.history.splice(index, 1);
      }

      this.history.unshift(title);

      localStorage.setItem("history", JSON.stringify(this.history));
      this.$router.push({
        path: "/searchList",
        query: { key_word: title },
      });
      // :to="{ path: '/searchList', query: { key_word: item.title } }"
    },

    //删除某个历史记录
    delele(index) {
      this.history.splice(index, 1);
      localStorage.setItem("history", JSON.stringify(this.history)); //再次存
    },

    //清除所有
    clear() {
      this.history = [];
      localStorage.setItem("history", JSON.stringify(this.history)); //再次存
    },
  },
};
</script>

<style  lang="less">
.search-container {
  background-color: @color3;
  height: @height;
  .searchList {
    position: fixed;
    left: 0;
    right: 0;
    top: 54px;
    bottom: 0;
    overflow-y: auto;
    z-index: 999;
  }
  .search-history {
    margin-top: 4px;
  }
  .van-search__content {
    border-radius: 20px;
  }
}
</style>
